<template>
	<!-- 构造具体的表单,子表单除外 -->

  <div :class="getRootClass()">
      <div v-if="parentContainer">

          <div  >

              <el-form-item class="widget-view"
                            v-if="element && element.key && element.type != 'divider'&& element.type != 'grid'"
                            :class="{active: (selectWidget.key == element.key &&  element.type!='grid'), 'is_req': element.options.required,'display':'block'}"
                            :label="getLable(element)"
                            @click.native.stop="handleSelectWidget(index)">
                  <widget-element-item :element="element" :is-table="false" label-class-name='workOrderStyle'></widget-element-item>
                  <div class="widget-view-action" v-if="selectWidget.key == element.key  && element.type!='grid'">
                      <!-- 复制, 删除图标 -->
                      <button type = "button" class="show-circle action-delete field-item-delete-button" @click.stop="handleWidgetDelete(index)">
                          <i class="iconfont icon-trash">

                          </i>
                      </button>
                  </div>

              </el-form-item>


          </div>


      </div>
      <div v-else>
          <el-col      class="drag-widget field-item"  :span="element.options.span<6 ? 6 : element.options.span">

              <el-form-item class="widget-view"
                            v-if="element && element.key && element.type != 'divider'"
                            :class="{active: selectWidget.key == element.key, 'is_req': element.options.required,'display':'block'}"
                            :label="getLable(element)"
                            @click.native.stop="handleSelectWidget(index)">
                  <widget-element-item :element="element" :is-table="false" label-class-name='workOrderStyle'></widget-element-item>
                  <div class="widget-view-action" v-if="selectWidget.key == element.key">
                      <!-- 复制, 删除图标 -->
                      <button type = "button" class="show-circle action-delete" @click.stop="handleWidgetDelete(index)">
                          <i class="iconfont icon-trash"></i>
                      </button>
                  </div>
              </el-form-item>
          </el-col>
      </div>






   <!-- 分割线的生成 -->
<!--	<el-col  class="widget-view no-put"-->
<!--      v-if="element && element.key && element.type == 'dividers'"-->
<!--      :class="{active: selectWidget.key == element.key}"-->
<!--      @click.stop="handleSelectWidget(index)"-->
<!--      style="padding-bottom: 0;">-->


<!--      <el-divider >-->
<!--      </el-divider>-->


<!--	  </el-col>-->
  </div>

</template>
<script>
import WidgetElementItem from './WidgetElementItem'
import WidgetConfig from './WidgetConfig'
import {getLable} from './js/formUtils.js'

export default {
  props: ['element', 'select', 'index', 'data',"parentContainer"],  // 父组件穿递的值
  components: {
      WidgetConfig,
    WidgetElementItem
  },
  data () {
    return {
      selectWidget: this.select
    }
  },

  created(){
       //  console.log( this.select);

  },
  methods: {
      getRootClass:function(){
          if (this.parentContainer){
              return "";
          } else{
              return "widget-view-drag"
          }
      },
      getData:function(){
      },
      getLable:function(element){
         return  getLable(element);
      },
    handleSelectWidget (index) {
      this.selectWidget = this.data.list[index]

    },
    handleWidgetDelete (index) {

      if (this.data.list.length == 1) {
        this.$emit('select-change', -1)
      } else {
        if (this.data.list.length - 1 == index) {
          this.$emit('select-change', index - 1)
        } else {
          this.$emit('select-change', index)
        }
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    handleWidgetClone (index) {

      const key = new Date().getTime() + '';
      let cloneData = {
        ...this.data.list[index],
        options: {...this.data.list[index].options},
        key,
        model: this.data.list[index].type + key,
      }

      if (Object.keys(this.data.list[index].options).includes('options')) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({...item}))
          }
        }
      }

      this.data.list.splice(index, 0, cloneData)

      this.$nextTick(() => {
        this.selectWidget = this.data.list[index + 1]
      })
    },
  },
  watch: {
    select (val) {  // 除第一次之外的表单触发
      this.selectWidget = val
    },
    selectWidget: {

      handler (val) {    //第一次拖拽表单时触发
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>
<style>

    .el-col-md-8 {
        width: 33.33333%
    }

    .el-col-md-offset-8 {
        margin-left: 33.33333%
    }

    .el-col-md-pull-8 {
        position: relative;
        right: 33.33333%
    }

    .el-col-md-push-8 {
        position: relative;
        left: 33.33333%
    }

    .el-col-md-9 {
        width: 37.5%
    }

    .el-col-md-offset-9 {
        margin-left: 37.5%
    }

    .el-col-md-pull-9 {
        position: relative;
        right: 37.5%
    }

    .el-col-md-push-9 {
        position: relative;
        left: 37.5%
    }

    .el-col-md-10 {
        width: 41.66667%
    }

    .el-col-md-offset-10 {
        margin-left: 41.66667%
    }

    .el-col-md-pull-10 {
        position: relative;
        right: 41.66667%
    }

    .el-col-md-push-10 {
        position: relative;
        left: 41.66667%
    }

    .el-col-md-11 {
        width: 45.83333%
    }

    .el-col-md-offset-11 {
        margin-left: 45.83333%
    }

    .el-col-md-pull-11 {
        position: relative;
        right: 45.83333%
    }

    .el-col-md-push-11 {
        position: relative;
        left: 45.83333%
    }

    .el-col-md-12 {
        width: 50%;
    }

    .el-col-md-offset-12 {
        margin-left: 50%
    }

    .el-col-md-pull-12 {
        position: relative;
        right: 50%
    }

    .el-col-md-push-12 {
        position: relative;
        left: 50%
    }

    .el-col-md-13 {
        width: 54.16667%
    }

    .el-col-md-offset-13 {
        margin-left: 54.16667%
    }

    .el-col-md-pull-13 {
        position: relative;
        right: 54.16667%
    }

    .el-col-md-push-13 {
        position: relative;
        left: 54.16667%
    }

    .el-col-md-14 {
        width: 58.33333%
    }

    .el-col-md-offset-14 {
        margin-left: 58.33333%
    }

    .el-col-md-pull-14 {
        position: relative;
        right: 58.33333%
    }

    .el-col-md-push-14 {
        position: relative;
        left: 58.33333%
    }

    .el-col-md-15 {
        width: 62.5%
    }

    .el-col-md-offset-15 {
        margin-left: 62.5%
    }

    .el-col-md-pull-15 {
        position: relative;
        right: 62.5%
    }

    .el-col-md-push-15 {
        position: relative;
        left: 62.5%
    }

    .el-col-md-16 {
        width: 66.66667%
    }

    .el-col-md-offset-16 {
        margin-left: 66.66667%
    }

    .el-col-md-pull-16 {
        position: relative;
        right: 66.66667%
    }

    .el-col-md-push-16 {
        position: relative;
        left: 66.66667%
    }

    .el-col-md-17 {
        width: 70.83333%
    }

    .el-col-md-offset-17 {
        margin-left: 70.83333%
    }

    .el-col-md-pull-17 {
        position: relative;
        right: 70.83333%
    }

    .el-col-md-push-17 {
        position: relative;
        left: 70.83333%
    }

    .el-col-md-18 {
        width: 75%
    }

    .el-col-md-offset-18 {
        margin-left: 75%
    }

    .el-col-md-pull-18 {
        position: relative;
        right: 75%
    }

    .el-col-md-push-18 {
        position: relative;
        left: 75%
    }

    .el-col-md-19 {
        width: 79.16667%
    }

    .el-col-md-offset-19 {
        margin-left: 79.16667%
    }

    .el-col-md-pull-19 {
        position: relative;
        right: 79.16667%
    }

    .el-col-md-push-19 {
        position: relative;
        left: 79.16667%
    }

    .el-col-md-20 {
        width: 83.33333%
    }

    .el-col-md-offset-20 {
        margin-left: 83.33333%
    }

    .el-col-md-pull-20 {
        position: relative;
        right: 83.33333%
    }

    .el-col-md-push-20 {
        position: relative;
        left: 83.33333%
    }

    .el-col-md-21 {
        width: 87.5%
    }

    .el-col-md-offset-21 {
        margin-left: 87.5%
    }

    .el-col-md-pull-21 {
        position: relative;
        right: 87.5%
    }

    .el-col-md-push-21 {
        position: relative;
        left: 87.5%
    }

    .el-col-md-22 {
        width: 91.66667%
    }

    .el-col-md-offset-22 {
        margin-left: 91.66667%
    }

    .el-col-md-pull-22 {
        position: relative;
        right: 91.66667%
    }

    .el-col-md-push-22 {
        position: relative;
        left: 91.66667%
    }

    .el-col-md-23 {
        width: 95.83333%
    }

    .el-col-md-offset-23 {
        margin-left: 95.83333%
    }

    .el-col-md-pull-23 {
        position: relative;
        right: 95.83333%
    }

    .el-col-md-push-23 {
        position: relative;
        left: 95.83333%
    }

    .el-col-md-24 {
        width: 100%
    }

    .el-col-md-offset-24 {
        margin-left: 100%
    }

    .el-col-md-pull-24 {
        position: relative;
        right: 100%
    }

    .el-col-md-push-24 {
        position: relative;
        left: 100%
    }
    .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        font-size: 12px;
        color: #545252 !important;
        padding: 0px 10px !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 30px;
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        float: left;
        width: 95px;
        cursor: pointer
    }
       .field-item {
        min-width: 120px;
        min-height: 70px;
        vertical-align: top;
        display: inline-block;
        border-width: 1px 1px 1px 3px;
        border-style: solid;
        border-color: rgb(255, 255, 255);
        border-image: initial;
        margin: 0px;
        padding: 0px 10px;
    }
   .el-form-item__content.el-input, .el-date-editor.el-input, .el-date-editor.el-input__inner {
        /* width: 100%  !important; */
		 width: 100%;
    }


</style>
